
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Getting Cross Domain JSON Data Using Y.jsonp()</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
#out {
    margin-top: 1em;
}
#out caption  {
    color: #f80;
    font-size: 123%;
    display: table-caption;
    *display: block;
}
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Getting Cross Domain JSON Data Using Y.jsonp()</h1>

<div class="exampleIntro">
	<p>This example illustrates basic use of the <code>Y.jsonp( url, callback )</code> method, provided by the <code>jsonp</code> module.</p>

<p>For this example, we will use <a href="http://develop.github.com/">GitHub's webservice API</a>, fetching user information about some members of the YUI team.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">
    <select id="github_user">
        <option value="yui">YUI Library</option>
        <option value="davglass">Dav Glass</option>
        <option value="lsmith">Luke Smith</option>
        <option value="rgrove">Ryan Grove</option>
        <option value="apm">Adam Moore</option>
        <option value="msweeney">Matt Sweeney</option>
        <option value="sdesai">Satyen Desai</option>
        <option value="jenny">Jenny Donnelly</option>
        <option value="allenrabinovich">Allen Rabinovich</option>
        <option value="tripp">Tripp Bridges</option>
        <option value="reid">Reid Burke</option>
    </select>
    <input type="button" id="demo_btn" value="Get user info">
    <div id="out">
    </div>
</div>
<script>
YUI({ filter: 'raw' }).use("jsonp", "node",function (Y) {

    var user      = Y.one("#github_user"),
        githubAPI = "http://github.com/api/v2/json/user/show/",
        template  = // assignment continued below
        
    '<table>' +
        '<caption>GitHub user <code>{login}</code> ({name})</caption>' +
        '<thead>' +
            '<tr>' +
                '<th>Repositories</th>' +
                '<th>Gists</th>' +
                '<th>Followers</th>' +
                '<th>Following</th>' +
            '</tr>' +
        '</thead>' +
        '<tbody>' +
            '<tr>' +
                '<td>{public_repo_count}</td>' +
                '<td>{public_gist_count}</td>' +
                '<td>{followers_count}</td>' +
                '<td>{following_count}</td>' +
            '</tr>' +
        '</tbody>' +
    '</table>';

    function handleJSONP(response) {
        Y.one("#out").setContent(Y.Lang.sub(template, response.user));
    }

    Y.one("#demo_btn").on("click", function (e) {
        // e.g. http://github.com/api/v2/json/user/show/yui?callback={callback}
        var url = githubAPI + user.get("value") + "?callback={callback}";

        Y.jsonp(url, handleJSONP);
    });

});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
